<template>
	<div :class="[{active:isMobile},'login-container']">
		<div class="head">
			<img src="@/assets/images/logo.png" />
			<a class="link" target="_blank" href="https://wireai.com/ ">{{ $t("login.title") }}</a>
		</div>
		<div class="content" v-if="userStore.registerType == 205 || userStore.registerType == 206 || userStore.registerType == 207 || !hasToken || userStore.isSubInfo">
			<div class="leftBox gsaptit" v-if="!isMobile">
				<span class="show tit-1">{{ $t("login.tit_2") }}</span>
				<span class="show tit-1 tit2">{{ $t("login.tit_3") }}<i class="ai">{{ $t("login.tit_4") }}</i></span>
				<span class="show tit-2">{{ $t('login.tit_desc') }}</span>
				<div class="builder" v-if="!isMobile" ref="card">
					<div class="operate1"></div>
					<div class="operate2"></div>
					<div class="operate3"></div>
					<div class="operate4"></div>
					<div class="operate5"></div>
					<div class="operate6"></div>
				</div>
			</div>
			<div :class="isMobile ? 'mobileLog' : ''" v-if="(userStore.registerType == 0 || userStore.registerType == 205 || userStore.registerType == 206 || userStore.registerType == 207 || !hasToken) && !userStore.isSubInfo && userStore.registerType != 201">
				<div v-if="isMobile">
					<span class="show tit-1">{{ $t("login.tit_2") }}</span>
					<span class="show tit-1 tit2">{{ $t("login.tit_3") }}<i class="ai">{{ $t("login.tit_4") }}</i></span>
					<span class="show tit-2">
						{{ $t('tit_desc2') }}<br/>
						{{ $t('tit_desc3') }}
					</span>
				</div>
				<div class="loginCon" >
					<span class="logoImg">
						<img src="@/assets/images/slogen.png" />
					</span>
					<span class="title"><i>{{ $t('login.mark') }}</i></span>
					
					<div class="code">
						<input ref="phone" 
							v-model="loginData.phone" 
							:class="[{active:isPhone},'textcont']" 
							@focus="handelInput(0)"
							@input="handelInput(0)"
							@blur="hideInput(0)"
							:placeholder="`${$t('login.phonetext')}`" name="phone" />
					</div>
					<div class="code">
						<input ref="phone" 
							v-model="loginData.smscode" 
							:class="[{active:isCode},'textinput textcont']" 
							@focus="handelInput(1)"
							@input="handelInput(1)"
							@blur="hideInput(1)"
							:placeholder="`${$t('login.codetext')}`" name="smscode" />
						<span class="btncode" @click="getCode" v-if="!isSend">{{ $t('login.sendcode') }}</span>
						<span class="btncode" v-else>{{ $t('login.sended') }}({{ time }}s)</span>
					</div>
					<el-button size="default" :loading="loading" v-if="isLogin" type="primary" class="btnSave"
						@click.prevent="handleLogin">{{ $t('login.login') }}
					</el-button>
					<el-button size="default" :loading="loading" v-else type="primary" class="btnSave disable">{{ $t('login.login') }}
					</el-button>
					<div class="mark" @click="getCheck"><span :class="[{active:isCheck},'check']" ></span>{{ $t('login.text1') }} <a class="bf">{{ $t('login.text2') }}</a> {{ $t('login.text3') }} <a class="bf">{{ $t('login.text4') }}</a></div>	
					<span class="error show" v-if="isError">{{ $t('login.text5') }}</span>
				</div> 
			</div> 
			<div v-else :class="isMobile ? 'lineBox flexC' : ''">
				<div class="loginexam">
					<span class="ts show">{{ $t('login.examine') }}</span>
					<span class="ts-2 show">{{ $t('login.examine_1') }}<a class="br">{{ $t('login.examine_2') }}</a>{{ $t('login.examine_3') }}</span>
					<span :class="[{active:isRefresh},'refresh']" @click="getRefresh">{{ $t('login.examine_4') }}</span>
				</div>
				
			</div>
			
		</div>
		<div class="filings" v-if="!isMobile">
			{{ $t('login.filing_1') }}<a>I</a>{{ $t('login.filing_2') }}<a>I</a>{{ $t('login.filing_3') }} <!-- <a class="show"  href="https://beian.miit.gov.cn/" target="_blank"><img src="@/assets/images/beian.png"/>冀ICP备2024052357号-1</a>   -->
		</div>
		<information v-if="(userStore.registerType == 203 || userStore.registerType == 202 || (userStore.registerType == 201 && userStore.ishoveStatus == true)) && !userStore.isSubInfo" @getLogins="getLogins"></information>
		<!-- -->
		<!-- <information	ation @getLogins="getLogins"></information> -->
		
	</div>
</template>

<script setup lang="ts">
	import information from './information.vue';
	import router from "@/router";
	import LangSelect from "@/components/LangSelect/index.vue";
	import SvgIcon from "@/components/SvgIcon/index.vue";
	
	// 状态管理依赖
	import { useUserStore } from "@/store/modules/user";
	// API依赖
	import { LocationQuery, LocationQueryValue, useRoute } from "vue-router";
	import { LoginData } from "@/api/auth/types";
	import { TimelineMax,gsap } from "gsap";
	import { TextPlugin } from "gsap/TextPlugin";
	import { basename } from 'path-browserify';
	import { useSystemStore } from "@/store/modules/system";
	import { useI18n } from 'vue-i18n'
	const { t } =useI18n();
	const base = useSystemStore();
	const api = inject('$base', null as any);
	const $_ = inject('$_', null as any);
	const userStore = useUserStore();
	const route = useRoute();
	const isSend = ref<boolean>(false);
	const loading = ref(false);
	const time = ref<number>(60);
	const timer = ref(null);
	const isPhone = ref<boolean>(false);
	const isCode = ref<boolean>(false);
	const isLogin = ref<boolean>(false);
	const isLog = ref<boolean>(true);
	const isCheck = ref<boolean>(false);
	const isError = ref<boolean>(false);
	const isRefresh = ref<boolean>(false);
	const isInfo = ref<boolean>(false);
	const isMobile = ref<boolean>(false);
	/**
	 * 登录表单引用
	 */
	const loginFormRef = ref(ElForm);

	const loginData = ref<any>({
		phone: "",
		smscode: "",
	});
	const splitTextTimeline = ref<any>();
	const mySplitText = ref<any>();
	const hasToken = localStorage.getItem("accessToken");
	onMounted(()=>{
		checkreg();
		const width = window.innerWidth;
		if(width < 768){
            isMobile.value = true;
			base.isMobile = true;
        }else{
			gsap1();
			base.isMobile = false;
		}
		
		
	})
	function getLogins(){
		console.log('111111')
		checkreg();
	}
	function gsap1(){
		const t = gsap.timeline();
		t.to('.operate1',{
			scale:1,
			left:48,
			duration:1.5,
			yoyo:true,
			ease:'elastic.out(1.1)',
			stagger:0.1,
			delay:0.5,
		})
		.to(".operate2",{ duration:1,
			 right:70,
			 ease: "power2.inOut" },'<')
		.to(".operate3", { duration: 1.2,
			 transform:"scale(1)",
			 top:62,
			 right:"40",
			 ease:"back.out(1.7)",
			 stagger:0.1},'-=0.6')
		.to(".operate4", { duration: 1.2,
			 transform:"scale(1)",
			 top:100,
			 right:"40",
			 ease:"back.out(1.7)",
			 stagger:0.1},'-=0.6')
		.to(".operate5", { duration: 1.2,
			 transform:"scale(1)",
			 top:175,
			 left:670,
			 ease:"back.out(1.7)",
			 stagger:0.1},'-=0.6')
		.to(".operate6", { duration: 1.2,
			 transform:"scale(1)",
			 top:200,
			 left:690,
			 ease:"back.out(1.7)",
			 stagger:0.1,
			 onComplete: () => { 
				 gsap2();
			 },
		},'-=0.6')
	}
	function gsap2(){
		const t2 = gsap.timeline();
		t2.to('.operate1',{
			scale:0.5,
			left:110,
			duration:1.5,
			yoyo:true,
			ease:'elastic.out(1.1)',
			stagger:0.1,
			delay:1,
		})
		.to(".operate2",{ duration:0.8,
			 right:-250,
			 ease: "power2.inOut" },'<')
		.to(".operate3", { duration: 0.8,
			 transform:"scale(0)",
			 top:"60%",
			 right:"40",
			 ease:"back.out(1.7)",
			 stagger:0.1},'<')
		.to(".operate4", { duration: 1,
			 transform:"scale(0)",
			 top:"60%",
			 right:"40",
			 ease:"back.out(1.7)",
			 stagger:0.1},'<')
		.to(".operate5", { duration: 1,
			 transform:"scale(0)",
			 top:"60%",
			 left:"50%",
			 ease:"back.out(1.7)",
			 stagger:0.1},'<')
		.to(".operate6", { duration: 1,
			 transform:"scale(0)",
			 top:"60%",
			 left:"50%",
			 ease:"back.out(1.7)",
			 stagger:0.1,
			 onComplete: () => { 
				 gsap1();
			 },
		},'<')
	}
	function getRefresh(){
		isRefresh.value = !isRefresh.value;
		if(!userStore.phone){
			userStore.isSubInfo = false;
			ElMessage({
				message: t('login.error_1'),
				type: 'error',
			})
			return;
		}
		let data = {
			phone : userStore.phone,
			smscode : userStore.tellcode
		}
		userStore.login(data).then((res) => {
			console.log(res,'111111111')
			const query : LocationQuery = route.query;
			let url;
			if(res.code == 200){
				userStore.registerType= 1;
				url = (query.redirect as LocationQueryValue) ?? '/'
				console.log(url,'6666666666');
				let redirect = url;
				const otherQueryParams = Object.keys(query).reduce(
					(acc : any, cur : string) => {
						if (cur !== "redirect") {
							acc[cur] = query[cur];
						}
						return acc;
					},
					{}
				);
				console.log(redirect)

				router.push({ path: redirect, query: otherQueryParams });
			}
			if(res.code == 206){
				ElMessage({
					message: t('login.error_1'),
					type: 'error',
				})
				userStore.registerType = 207;
			}
			if(res.code == 205){
				userStore.isSubInfo = false;
				ElMessage({
					message: t('login.error_2'),
					type: 'error',
				})
			}

		})
		.catch(() => {
			// 验证失败，重新生成验证码
		});
	}
	function getCheck(){
		isCheck.value = !isCheck.value;
	}
	function handelInput(type:number){
		if(type == 0){
			isPhone.value = true;
		}else{
			isCode.value = true;
		}
		checkInput();
	}
	function hideInput(type:number){
		if(type == 0){
			isPhone.value = false;
		}else{
			isCode.value = false;
		}
		checkInput();
	}
	function checkInput(){
		if(!loginData.value.smscode || !loginData.value.phone ){
			isLogin.value = false;
		}else{
			isLogin.value = true;
		}
	}
	function checkLogin(){
		const isTell =  /^1[3456789]\d{9}$/;
		if(!loginData.value.phone || !isTell.test(loginData.value.phone)){
			isPhone.value = true;
			isLogin.value = false;
			ElMessage({
				message: t('login.error_phone'),
				type: 'error',
			})
			return false;
		}else if(!loginData.value.smscode){
			isCode.value = true;
			isLogin.value = false;
			return false;
		}else if(!isCheck.value){
			isError.value = true;
			setTimeout(()=>{
				isError.value = false;
			},1500)
			return;
		}else{
			isLogin.value = true;
			return true;
		}
	}
	function checkreg(){
		
		if(!hasToken){
			return;
		}
		let data = {
			phone : userStore.phone,
			smscode : userStore.tellcode
		}
		if(!userStore.phone || !userStore.tellcode){
			userStore.registerType = 207;
			return;
		}
		userStore.login(data).then((res) => {
			console.log(res,'111111111')
			
			const query : LocationQuery = route.query;
			let url;
			if(res.code == 200){
				userStore.registerType= 1;
				url = (query.redirect as LocationQueryValue) ?? '/'
				console.log(url,'6666666666');
				let redirect = url;
				const otherQueryParams = Object.keys(query).reduce(
					(acc : any, cur : string) => {
						if (cur !== "redirect") {
							acc[cur] = query[cur];
						}
						return acc;
					},
					{}
				);
				console.log(redirect)

				router.push({ path: redirect, query: otherQueryParams });
			}
			if(res.code == 206){
				ElMessage({
					message: t('login.error_1'),
					type: 'error',
				})
				userStore.registerType = 207;
			}
			if(res.code == 205){
				userStore.isSubInfo = false;
				ElMessage({
					message: t('login.error_2'),
					type: 'error',
				})
			}

		})
		.catch(() => {
			// 验证失败，重新生成验证码
		})
		.finally(() => {
			loading.value = false;
		});
		
	}
	/**
	 * 登录
	 */
	function handleLogin() {
		if(checkLogin()){
			loading.value = true;
			userStore.login(loginData.value).then((res) => {
				console.log(res,'111111111')
				userStore.phone = loginData.value.phone;
				userStore.tellcode = loginData.value.smscode;
				const query : LocationQuery = route.query;
				let url;
				if(res.code == 200){
					url = (query.redirect as LocationQueryValue) ?? '/'
					console.log(url,'6666666666');
					let redirect = url;
					const otherQueryParams = Object.keys(query).reduce(
						(acc : any, cur : string) => {
							if (cur !== "redirect") {
								acc[cur] = query[cur];
							}
							return acc;
						},
						{}
					);
					console.log(redirect)

					router.push({ path: redirect, query: otherQueryParams });
				}
				if(res.code == 206 || res.code == 207){
					ElMessage({
						message: res.msg,
						type: 'error',
					})
				}
				if(res.code == 205){
					ElMessage({
						message: t('login.error_2'),
						type: 'error',
					})
				}
				
			})
			.catch(() => {
				// 验证失败，重新生成验证码
			})
			.finally(() => {
				loading.value = false;
			});
		}

	}
	function getCode(){
		const isTell =  /^1[3456789]\d{9}$/;
		if(!loginData.value.phone || !isTell.test(loginData.value.phone)){
			isPhone.value = true;
			isLogin.value = false;
			ElMessage({
				message: t('login.error_phone'),
				type: 'error',
			})
			return false;
		}
		let data = {
			phone : loginData.value.phone
		}
		api.sendCode(data).then((res)=>{
			ElMessage({
				message: h('p', null, [
					h('span', { style: 'color: #0189f6' }, t('login.error_3')),
				]),
				customClass: 'custom-message', 
				iconClass: 'custom-icon',
				duration:2000
			})
			isSend.value = true;
			time.value = 60;
			gettime();
		})
	}
	function gettime(){
		timer.value = setInterval(()=>{
			if(time.value == 0){
				isSend.value = false;
				clearInterval(timer.value);
				return;
			}
			time.value--;
		},1000)
	}
</script>

<style lang="scss" scoped>
	.show{
		display:block;
	}
	.login-container {
		width: 100%;
		min-height: 100%;
		overflow: hidden;
		position: relative;
		background: url(../../assets/images/loginbg.jpg) no-repeat center center;
		background-size: cover;
		display:flex;
		align-items:center;
		justify-content:center;
		padding-top:46px;
		&.active{
			position: fixed;
			left: 0;
			top:0;
			width: 100%;
			height: 100vh;
		}
		&::after{
			// background: url(../../assets/images/logBg.png) no-repeat center center;
			// background-size:934px 757px;
			width:934px;
			height:757px;
			right:0;
			top:0;
			position:absolute;
			content:'';
		}
		.head{
			background:#f1f6fc;
			border-bottom: solid 1px #dbe2ee;
			display:flex;
			align-items:center;
			justify-content:space-between;
			padding:0 20px 0 15px;
			height:46px;
			position:fixed;
			z-index:999;
			left:0;
			top:0;
			width:100%;
			img{
				width:94px;
				height:25px;
			}
			.link{
				background: url(../../assets/images/link.png) no-repeat left center;
				background-size:16px 16px;
				color:#9094b0;
				font-size:14px;
				padding-left:20px;
				display:flex;
				height:100%;
				align-items:center;
			}
		}
		.tit-1{
				font-size:30px;
				font-family:'siyuanB';
				color:#2a2a2a;
				line-height:42px;
				padding-left:175px;
				i{
					font-style:normal;	
					background: linear-gradient(90deg, #2379ff, #0ac1ba);
					-webkit-background-clip: text;
					color: transparent;
				}
			}
			.tit-2{
				color:#5f7298;
				font-size:14px;
				line-height:30px;
				padding-left:175px;
				font-family:'siyuanR';
				margin-bottom:4px;
				white-space: nowrap;
			}
			

		.leftBox{
			width:calc(100% - 465px - 45px);
			position:absolute;
			left:0;
			padding-top:30px;
						.builder{
				background: url(../../assets/images/bulider1.png) no-repeat 135px top;
				background-size:779px 474px;
				width:100%;
				height:510px;
				position:relative;
				overflow:hidden;
				transition: all 0.8s ease;
				&.active{
					margin-top:70px;
				}
				.operate1{
					background: url(../../assets/images/box1.png) no-repeat;
					background-size:100%;
					
					position:absolute;
					// width: 170px;
					// height: 110px;
					// left:155px;
					// top:277px;
					width:260px;
					height:169px;
					// left:48px;
					top:247px;
					transform: scale(0.5);
					left: 110px;
					display: block;
					// animation: fadeIn 8s infinite;
				}

				@keyframes fadeIn {
					0%, 100% {
						opacity: 0;
						transform: scale(0) rotate(0);
					}
					12.5%,87.5%{
						opacity: 1;
						transform: scale(1);
					}	
					100% {
						opacity: 0;
						transform: scale(0) rotate(0);
					}
				}
				.operate2{
					background: url(../../assets/images/box2.png) no-repeat;
					background-size:100% auto;
					width:247px;
					height:390px;
					position:absolute;
					right:-250px;
					top:112px;
					// animation: slideInRight 8s infinite;
				}
				@keyframes slideInRight {
					0%,
					12.5%,
					100%  {
						opacity: 0;
						transform: translateX(120%);
					}
					// 25%{
					// 	opacity: 0;
					// 	transform: translateX(120%);
					// }
					25%,
					87.5%{
						opacity: 1;
						transform: translateX(0);	
					}
					100% {
						opacity: 0;
						transform: scale(0);
						transform: translateX(120%);
					}
				}
				.operate3{
					background: url(../../assets/images/box3.png) no-repeat;
					background-size:100%;
					width:222px;
					height:49px;
					position:absolute;
					right:40px;
					top:60%;
					transform:scale(0);
					// animation: slideInRight2 8s infinite;
				}
				@keyframes slideInRight2 {
					0%,
					25% {
						opacity: 0;
						transform: translateY(120%);
					}
					// 30% {
					// 	opacity: 0;
					// 	transform: translateX(120%);
					// }
					37.5%,
					87.5%{
						opacity: 1;
						transform: translateY(0);
					}
					100% {
						opacity: 0;
						transform: scale(0);
						transform: translateY(120%);

					}
				}
				.operate4{
					background: url(../../assets/images/box4.png) no-repeat;
					background-size:100%;
					width:159px;
					height:47px;
					position:absolute;
					right:40px;
					top:60%;
					transform:scale(0);
					// animation:slideInUp 8s infinite;
				}
				@keyframes slideInUp {
					0%,
					37.5% {
						opacity: 0;
						transform: translateY(120%);
					}

					50%,
					51%{
						opacity: 1;
						transform: translateY(0);
					}
					60%,
					87.5%{
						opacity: 1;
						transform: translateY(0);
					}
					100% {
						opacity: 0;
						transform: translateY(120%);
					}
				}
				.operate5{
					background: url(../../assets/images/box5.png) no-repeat;
					background-size:100%;
					width:131px;
					height:39px;
					position:absolute;
					z-index:10;
					transform:scale(0);
					top:60%;
					left:50%;
					// animation:slideInLeft 8s infinite;

				}
				@keyframes slideInLeft {
					0%,
					50% {
						opacity: 0;
						transform: translateX(-100%);
					}
					75%,
					87.5%{
						opacity: 1;
						transform: translateX(0);
					}
					100% {
						opacity: 0;
						transform: translateX(-100%);
					}
				}
				.operate6{
					background: url(../../assets/images/box6.png) no-repeat;
					background-size:100%;
					width:223px;
					height:213px;
					position:absolute;
					
					transform:scale(0);
					top:60%;
					left:50%;
					// animation: fadeOut 8s infinite;
				}
				@keyframes fadeOut {
					0%,70% {
						opacity: 0;
						transform: scale(0);
					}
					// 75%{
					// 	opacity: 0;
					// 	transform: scale(0);
					// }
					75%,96%{
						opacity: 1;
						transform: scale(1);
					}
					100% {
						opacity: 0;
						transform: scale(0);
					}
				}
			}
		}
		
		.content {
			display:flex;
			width: auto;
			width:100%;
			max-width:1600px;
			margin:0 auto;
			position: relative;
			height:calc(100vh - 46px);
			max-height: 750px;
			border-radius: 10px;
			z-index:10;
			.loginCon{
				width: 365px;
				height:325px;
				padding:30px 0 25px 0; 
				background:#f8fbff;
				border-radius:5px;
				position:absolute;
				right:145px;
				top:160px;
				box-shadow:2px 3px 7px rgba(166,182,299,.4);
			}
			.logoImg {
				height: 30px;
				width: 100%;
				position: relative;
				display: block;
				display:flex;
				align-items:center;
				justify-content:center;
				img {
					width: auto;
					height: 20px;
				}
			}
			.title {
				color: #0189f6;
				line-height:32px;
				// font-weight: bold;
				display: block;
				font-size: 16px;
				text-align: center;
				margin-bottom:25px;
				i{
					font-style:normal;
					display:inline-block;
					position:relative;
					padding:0 10px;
					font-family:'siyuanR';
					&::before,&::after{
						position:absolute;
						content:'';
						width:4px;
						height:7px;
					}
					&::before{
						left:0;
						background: url(../../assets/images/icon7.png) no-repeat;
						background-size:4px 7px;
						top:5px;
					}
					&::after{
						right:0;
						background: url(../../assets/images/icon8.png) no-repeat;
						background-size:4px 7px;
						bottom:5px;
					}
				}
			}

			.loginexam{
				width: 480px;
				height:680px;
				background: url(../../assets/images/logBg.png) no-repeat center center;
				background-size:673px 680px;
				display:flex;
				flex-direction:column;
				align-items:center;
				justify-content:center;
				position:absolute;
				z-index:10;
				right:70px;
				top:50%;
				margin-top:-340px;
				.ts{
					font-family:'siyuanM';
					font-size:26px;
					color:#0189f6;
					text-align:center;
					line-height:40px;
					background: url(../../assets/images/icon6.png) no-repeat top center;
					background-size:72px 73px;
					padding-top:80px;
				}
				.refresh{
					position:relative;
					padding-left:25px;
					font-size:15px;
					color:#0189f6;
					line-height:60px;
					cursor:pointer;
					
					&::before{
						position:absolute;
						background: url(../../assets/images/refresh.png) no-repeat;
						background-size:18px 18px;
						left:0;
						top:50%;
						margin-top:-9px;
						width:18px;
						height:18px;
						content:'';
					}
					&.active{
						&::before{
							animation: rotation 1s 1 linear;
						}
					}
					@keyframes rotation {
						from {
							-webkit-transform: rotate(0deg);
							transform: rotate(0deg)
						}
						
						to {
							-webkit-transform: rotate(360deg);
							transform: rotate(360deg)
						}
					
					}
				}
				.br{
					color:#0189f6;
				}
				.ts-2{
					font-family:'siyuanN';
					font-size:18px;
					color:#666666;
					line-height:30px;
					
				}
			}
		}
		.mark{
			width:calc(100% - 24px);
			font-size:12px;
			padding:0 12px;
			display:flex;
			color:#9094b0;
			align-items:center;
			height:40px;
			cursor: pointer;
			.bf{
				color:#2379f7;
			}
			.check{
				width:10px;
				height:10px;
				border:solid 1px #ccc;
				display:inline-block;
				border-radius:50px;
				margin-right:5px;
				cursor:pointer;
				&.active{
					border:none;
					background: url(../../assets/images/check2.png) no-repeat;
					background-size:10px 10px;
				}
			}
		}
		.error{
			color:#fb240e;
			width:100%;
			text-align:center;
			font-size:12px;
			position: absolute;
			bottom: 5px;
			left:0;
		}
		.btnSave{
			width:calc(100% - 24px);
			background:#0189f6;
			height:40px;
			text-align:center;
			line-height:40px;
			border-radius:5px;
			margin:10px 12px 0 12px;
			display:block;
			color:#fff;
			font-size:15px;
			padding:0;
			cursor:pointer;
			border:none;
			&.disable{
				cursor:default;
				background:#8dbafb;
			}
		}
		.code{
			width:100%;
			padding:0 12px;
			margin-bottom: 15px;
			height:40px;
			.textcont{
				background:#ffffff;
				border:solid 1px #dbe2ee;
				border-radius:5px;
				color: #9094b0;
				height: 40px;
				padding: 0 15px;
				font-size:14px;
				width:100%;
				box-shadow:0 0 7px rgba(166,182,229,.4);
				outline:none;
				box-sizing:border-box;
				float:left;
				&.active{
					border:solid 1px #5d9cf9;
				}
				&.textinput{
					width:calc(100% - 125px);
				}
				&::-webkit-input-placeholder {
					color:rgba(144,148,176,.5);
				}
			}
			.btncode{
				width:115px;
				border:solid 1px #0189f6;
				height:40px;
				display:flex;
				float:right;
				align-items:center;
				justify-content:center;
				border-radius:5px;
				font-size:14px;
				color:#2882fd;
				cursor:pointer;
				transition:all .5s;
				box-sizing:border-box;
				outline:none;
				&:hover{
					background:#2882fd;
					color:#fff;
				}
			}
		}
	}
	
	

	.el-input__inner {
		color: #333 !important;
	}

	.el-input__wrapper .el-input {
		color: #333 !important;

	}

	.el-form-item__content {}

	.el-input {
		background: transparent;
		color: #333 !important;
		font-size: 1rem;

		// 子组件 scoped 无效，使用 :deep
		:deep(.el-input__wrapper) {
			padding: 0;
			background: transparent;
			box-shadow: none;

			.el-input__inner {
				color: #333;
				background: transparent;
				border: 0;
				border-radius: 0;
				caret-color: #333;

				&:-webkit-autofill {
					box-shadow: 0 0 0 1000px transparent inset !important;
					-webkit-text-fill-color: #fff !important;
				}

				// 设置输入框自动填充的延迟属性
				&:-webkit-autofill,
				&:-webkit-autofill:hover,
				&:-webkit-autofill:focus,
				&:-webkit-autofill:active {
					transition: color 99999s ease-out, background-color 99999s ease-out;
					transition-delay: 99999s;
				}
			}
		}
	}

	.savebtn {
		height: 3rem;
		border-radius: 0.5rem;
		font-size: 1.2rem;
		width: 100%;
	}
	
	.filings{
		width:100%;
		color:#9094b0;
		position:fixed;
		bottom:20px;
		text-align:center;
		left:0;
		font-size:12px;
		padding: 0 15px;
		z-index:99;
		a{
			margin:0 20px;
		}

	}
	@media (max-width: 1600px) {
		.login-container {
			.content{
				
			}
		}
	}
	@media (max-width: 1000px) {
		.login-container{
			.leftBox{
				width:100%;
				height:400px;
				.builder{
					width:calc(100% - 15px);
					// display:none;
					
					&.active{
						display:block;
					}
				}
			}
		}  
	}
	@media (max-width: 768px) {
		.login-container{
			.tit-1{
				font-size:26px;
				line-height:30px;
				padding:0 0;
				height: 30px;
				overflow: hidden;
				&.tit2{
					font-size:20px;
				}
			}

			.tit-2{
				line-height:24px;
				padding:0 0;
				margin-top:5px;
			}
			.leftBox{
				padding:20px 0; 
				height:600px;
				
				.builder{
					// display:none;
					background: url(../../assets/images/bulider1.png) no-repeat 0 top;
					background-size:100% auto;
					height:250px;
					
					.operate1{
						width:120px;
						height:70px;
						left:-10px;
						top:120px;
					}
					.operate2{
						width:130px;
						height:180px;
						right:-5px;
						top:60px;
					}
					.operate3{
						width:120px;
						top:20px;
						right:-5px;
					}
					.operate4{
						width:100px;
						top:45px;
						right:-5px;
					}
					.operate5{
						width:90px;
						top:60px;
						right:100px;
					}
					.operate6{
						width:120px;
						height:117px;
						top:75px;
						right:40px;
					}
				}
			}
			.content{
				.lineBox{
					background: url(../../assets/images/wapbg03.png) no-repeat top center #dfeaf8;
					background-size:100% auto;
					height:calc(100vh - 46px);
					width:100%;
					.loginexam{
						margin-top:0;
					}
				}
				.mobileLog{
					position: absolute;
					right:0;
					padding:0 20px;
					width:100%;
					top:50%;
					transform: translateY(-50%);
					margin-top:20px;
					height: auto;
					padding-bottom:170px;
					&::after{
						background: url(../../assets/images/wabbg01.png) no-repeat;
						background-size:100% auto;
						width:100%;
						height:188px;
						position:absolute;
						bottom:0;
						content:'';
						right:-20px;
					}
					
				}
				
				.loginCon{
					position: relative;
					left: 0;
					right:0;
					top:0;
					bottom: 0;
					margin-top: 25px;
					width: 100%;
				}
				.loginexam{
					position: relative;
					left: 0;
					right:0;
					top:0;
					bottom: 0;
					margin-top: 30px;
					width: 100%;
					height:350px;
				}
			}
			.code{
				.textcont{
					box-shadow:none;
				}
			}
		}
		.filings{
			bottom: 10px;
			padding: 0 20px;

		}
	}
</style>